<template>
  <div class="menu">
    <div class="menu">
      <van-nav-bar
        fixed
        title="菜谱详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="nav_bar">
      <div class="img_box">
        <img class="img_box" :src="datalist.photo_path" alt="" />
      </div>
      <div class="title">
        <h3>{{ datalist.title }}</h3>
      </div>
      <div class="issue">
        <div class="ren">
          <div class="tou">
            <img class="auto_img" :src="datalist.user.user_photo" alt="" />
          </div>
          <div class="sp">
            <span>{{ datalist.user.nick }}</span>
            <i>Lv.{{ datalist.user.lvl }}</i>
          </div>
          <div class="tiem">发布时间：<p>{{datalist.create_time}}</p></div>
        </div>
        <div class="describe">
          {{ datalist.cookstory }}
        </div>
        <div class="inventory">
          <h4>食材清单</h4>
          <div class="li" v-for="(item, index) in inventorylist" :key="index">
            <div class="li_left">{{ item.title }}</div>
            <div class="li_right">{{ item.note }}</div>
          </div>

          <div class="step_box">
            <h3>烹饪步骤</h3>
            <div class="step" v-for="(items, index) in steplist" :key="index">
              <div class="step_top">步骤{{ items.position }}/{{ length }}</div>
              <div class="step_center">
                <img class="auto_img" :src="items.image" alt="" />
              </div>
              <div class="step_bottom">
                {{ items.content }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Menu",
  data() {
    return {
      datalist: {
        photo_path: '',
        user: {},
      },

      // 清单列表
      inventorylist: [],
      //   步骤列表
      steplist: [],

      length: "",
    };
  },

  methods: {
    onClickLeft() {
      this.$router.go(-1);
      //   Toast("返回");
    },

    gomeun(id) {
      //   console.log(id);
      this.axios({
        method: "get",
        url: `/recipe/detail/${id}`,
      })
        .then((result) => {
          if (result.status == 200) {
            // console.log(result);

            this.datalist = result.data.result.recipe;
            
            this.inventorylist = result.data.result.recipe.major;
            this.steplist = result.data.result.recipe.cookstep;
            this.length = this.steplist.length;
            // console.log(result.data.result.recipe);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    let pid = this.$route.params.id;
    //   console.log('pid ==> ', pid);
    this.gomeun(pid);
  },
};
</script>

<style lang="less" scoped>
.menu {
  width: 100%;
  height: 100%;
  // overflow: auto;
  .nav_bar {
    width: 100%;
    height: 100%;
    // background-color: pink;

    .img_box {
      width: 100%;
      min-height: 300px;
      //   background-color: pink;
    }
    .title {
      margin-left: 15px;
    }
    .issue {
      width: 90%;
      padding: 0 5%;
      height: 40px;
      //   background-color: yellow;
      .ren {
        width: 100%;
        height: 100%;
        .tou {
          float: left;
          width: 40px;
          height: 40px;
          //   background-color: aqua;
          border-radius: 50%;
          border: 1px solid #ccc;
          overflow: hidden;
        }
        .sp {
          margin-left: 10px;
          margin-top: 15px;
          float: left;
          width: 150px;
          height: 25px;
          .time{
              width: 150px;
          }
          span {
            font-size: 0.4rem;
            font-weight: bold;
          }

          i {
            color: rgb(214, 153, 19);
            font-size: 0.11rem;
          }
        }
      }
      .describe {
        width: 100%;
        min-height: 30px;
        // background-color: aquamarine;
        padding-top: 10px;
      }
    }
  }
  .inventory {
    width: 100%;
    height: 100%;
    .li {
      width: 100%;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
    }
    .step_box {
      width: 100%;
      height: 100%;

      .step {
        width: 100%;
        min-height: 350px;
        // background-color: pink;
        margin-bottom: 10px;
        .step_top {
          width: 100%;
          padding-bottom: 15px;
          font-weight: bold;
        }
        .step_center {
          width: 100%;
          padding-bottom: 15px;
        }
        .step_bottom {
          width: 100%;
          padding-bottom: 15px;
        }
      }
    }
  }
}
.auto_img {
  width: 100%;
  display: block;
}
.menu::-webkit-scrollbar {
  width: 0 !important;
}
</style>